<template>
  <van-tabbar active-color="#FF9700" route>
    <van-tabbar-item
      v-for="(item, index) in tabArr"
      :key="index"
      :to="item.url"
    >
      <span>{{ item.title }}</span>
      <template #icon="props">
        <i
          :class="[
            'iconfont',
            props.active ? `icon-${item.icon}-active` : `icon-${item.icon}`,
          ]"
        ></i>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      tabArr: [
        {
          title: "首页",
          icon: "home",
          url: "/home",
        },
        {
          title: "岗位",
          icon: "job",
          url: "/job",
        },
        {
          title: "我的",
          icon: "my",
          url: "/my",
        },
      ],
    };
  }
};
</script>

<style lang="less" scoped>
.iconfont {
  font-size: 25px;
}
</style>
